<template>
  <div class="box">
    <div class="container">
      <div class="search-box">
        <div class="search-top-box" :style="moreSearchShow?'height:200px;overflow-y:auto':''">
          <div class="search-top-left-box">
            <el-form ref="div" :inline="true" :model="formSearch" class="demo-form-inline" label-width="100px">
              <el-form-item label="项目名称">
                <el-input clearable class="form-width" v-model="formSearch.title" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="归属客户">
                <el-select filterable clearable class="form-width" v-model="formSearch.client_id" placeholder="">
                  <el-option v-for="(item,index) in 1" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="项目进度">
                <el-select clearable class="form-width" v-model="formSearch.progress" placeholder="">
                  <el-option v-for="(item,index) in 2" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商务负责人">
                <el-select filterable clearable class="form-width" v-model="formSearch.principal_id" placeholder="">
                  <el-option v-for="(item,index) in 3" :key="index" :label="item.nickname" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品服务">
                <el-select filterable clearable class="form-width" v-model="formSearch.type_id" placeholder="">
                  <el-option v-for="(item,index) in ProjectType" :key="index" :label="item.type_name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="search-top-right-box">
            <p v-if="showOpne" @click="moreSearch">{{moreSearchShow?'收起':'展开'}}<i
                :class="moreSearchShow?'el-icon-arrow-up':'el-icon-arrow-down'"></i></p>
            <el-button type="primary" @click="onSreach">查询</el-button>
            <el-button type="primary" @click="addProjectFunc">新增项目</el-button>
          </div>
        </div>
      </div>
      <!-- table -->
      <el-table :header-cell-style="{background:'#FAFBFC',color:'#828A9D',textAlign:'center'}"
        :cell-style="{textAlign:'center',color:'#1B2431'}" :data="tableData" style="width: 100%"
        v-loading="tableLoading">
        <el-table-column prop="project_number" label="项目编号" width="110" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="project_name" label="项目名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="project_type" label="项目类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <p v-if="scope.row.project_type==1">新店</p>
            <p v-if="scope.row.project_type==2">改造店</p>
            <p v-if="scope.row.project_type==3">翻新店</p>
            <p v-if="scope.row.project_type==4">特批新店</p>
            <p v-if="scope.row.project_type==5">特批改造店</p>
            <p v-if="scope.row.project_type==6">现场对接店</p>
          </template>
        </el-table-column>
        </el-table-column>
        <el-table-column prop="customer_name" label="客户" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="source" label="来源" show-overflow-tooltip>
          <template slot-scope="scope">
            <p>{{scope.row.source==1?'小程序创建':'后台创建'}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="项目状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="flex ac jc">
              <p v-if="scope.row.display_status ==10">待启动</p>
              <p v-if="scope.row.display_status ==15">待勘场</p>
              <p v-if="scope.row.display_status ==20">出图中</p>
              <p v-if="scope.row.display_status ==25 ">待报价</p>
              <p v-if="scope.row.display_status ==30 ">洽谈中</p>
              <p v-if="scope.row.display_status ==40 || scope.row.display_status>40 ">已签约</p>
              <p v-if="scope.row.display_status ==42 ">-待进场</p>
              <p v-if="scope.row.display_status ==45 ">-施工中</p>
              <p v-if="scope.row.display_status ==50 ">-已完工</p>
              <p v-if="scope.row.display_status ==55 ">-待结算</p>
              <p v-if="scope.row.display_status ==60 ">-款项付清</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="250">
          <template slot-scope="scope">
            <el-button style="margin-right: 10px;" size="mini" @click="detailDrawer=true">详情</el-button>
            <el-dropdown trigger="click">
              <el-button size="mini">
                更多
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination class="el-pagination" @current-change="handleCurrentChange" :current-page="page" :page-size="num"
      @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!-- 新增项目 -->
    <el-dialog title="新增项目" :visible.sync="addDialogVisible" width="500px">
      <el-form :rules="addRules" ref="addRuleForm" :model="addFormInline" class="demo-form-inline" label-width="80px">
        <el-form-item label="装修类型" prop="project_type">
          <div class="radio-group">
            <el-radio-group v-model="addFormInline.project_type">
              <el-radio :label="1">新店</el-radio>
              <el-radio :label="2">改造店</el-radio>
              <el-radio :label="3">翻新店</el-radio>
              <el-radio :label="4">特批新店</el-radio>
              <el-radio :label="5">特批改造店</el-radio>
              <el-radio :label="6">现场对接店</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="项目名称" prop="project_name">
          <el-input clearable placeholder="输入项目名称" class="input-box" v-model="addFormInline.project_name"></el-input>
        </el-form-item>
        <el-form-item label="所属地区" prop="project_city">
          <el-cascader class="input-box" v-model="addFormInline.project_city" :options="cityList" placeholder="请选择所属地区"
            clearable :props="{ expandTrigger: 'hover', label: 'name', value: 'id' }">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input clearable placeholder="输入详细地址" class="input-box" v-model="addFormInline.address"></el-input>
        </el-form-item>
        <el-form-item label="关联客户" prop="user_id">
          <el-select @change="selectChangeFunc({$event,type:'user'})" clearable class="input-box"
            v-model="addFormInline.user_id" placeholder="请选择">
            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道经理" prop="channel_manager_id">
          <el-select @change="selectChangeFunc({$event,type:'channel_manager'})" clearable class="input-box"
            v-model="addFormInline.channel_manager_id" placeholder="请选择">
            <el-option v-for="item in channelManagerList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程总监" prop="engineeringSupervision_id">
          <el-select @change="selectChangeFunc({$event,type:'engineeringSupervision'})" clearable class="input-box"
            v-model="addFormInline.engineeringSupervision_id" placeholder="请选择">
            <el-option v-for="item in engineeringSupervisionList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌" prop="brand_id">
          <el-select @change="selectChangeFunc({$event,type:'brand'})" clearable class="input-box"
            v-model="addFormInline.brand_id" placeholder="请选择">
            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="节点模板" prop="template_id" v-if="addFormInline.brand_id">
          <el-select clearable class="input-box" v-model="addFormInline.template_id" placeholder="请选择">
            <el-option v-for="item in brandTemplate" :key="item.id" :label="item.template_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否勘场" prop="survey_site">
          <el-radio-group v-model="addFormInline.survey_site">
            <el-radio :label="3">实地勘场</el-radio>
            <el-radio :label="2">勘场出图</el-radio>
            <el-radio :label="1">无需勘场</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设计师" prop="designer_id">
          <el-select @change="selectChangeFunc({$event,type:'designer'})" clearable class="input-box"
            v-model="addFormInline.designer_id" placeholder="请选择">
            <el-option v-for="item in designerList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="addLoading" @click="cancelFunc">取 消</el-button>
        <el-button :loading="addLoading" type="primary" @click="addSubmit('addRuleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 详情 -->
    <el-drawer title="项目详情" :visible.sync="detailDrawer" direction="rtl" size="500px">
      <div class="scroll-view">
        <div class="title-box">基础信息</div>
        <div class="data-box">
          <div class="table-one flex ac">
            <div class="title">项目名称</div>
            <p class="contnet">喜茶(SM店)翻新计划</p>
          </div>
          <div class="table-one flex ac jb">
            <div class="left flex ac">
              <div class="title">项目编号</div>
              <p class="contnet">喜茶(SM店)翻新计划</p>
            </div>
            <div class="right flex ac">
              <div class="title">项目状态</div>
              <p class="contnet">喜茶(SM店)翻新计划</p>
            </div>
          </div>
          <div class="table-one flex ac jb">
            <div class="left flex ac">
              <div class="title">客户经理</div>
              <p class="contnet">喜茶(SM店)翻新计划</p>
            </div>
            <div class="right flex ac">
              <div class="title">渠道经理</div>
              <p class="contnet">喜茶(SM店)翻新计划</p>
            </div>
          </div>
          <div class="table-one flex ac jb">
            <div class="left flex ac">
              <div class="title">客户名称</div>
              <p class="contnet">喜茶(SM店)翻新计划</p>
            </div>
            <div class="right flex ac">
              <div class="title">电话号码</div>
              <p class="contnet">喜茶(SM店)翻新计划</p>
            </div>
          </div>
          <div class="table-one flex ac jb">
            <div class="left flex ac">
              <div class="title">品牌</div>
              <p class="contnet">喜茶(SM店)翻新计划</p>
            </div>
            <div class="right flex ac">
              <div class="title">所属地区</div>
              <p class="contnet">喜茶(SM店)翻新计划</p>
            </div>
          </div>
          <div class="table-one flex ac">
            <div class="title">详细地址</div>
            <p class="contnet">喜茶(SM店)翻新计划</p>
          </div>
        </div>
        <div class="title-box">项目进度</div>
        <el-timeline>
          <el-timeline-item v-for="(activity, index) in 3" :key="index">
            <div class="setp-box">
              <div class="setp-top flex ac jb">
                <p class="time">2024-05-28 12:00</p>
                <div class="user-box flex ac">
                  <img class="avater" src="../../assets/login.png" />
                  设计师名字
                </div>
              </div>
              <div class="setp-content">
                <div class="title">项目设计图</div>
                <div class="img-list-box flex ac fw">
                  <img v-for="(activity, index) in 10" :key="index" class="img" src="../../assets/icon/logo.png" />
                </div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="btn-box flex ac frr">
        <el-button class="btn" type="primary">上传设计图</el-button>
        <el-button class="btn">项目取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import _tools from '@/utils/_tools'
  import adminApi from "@/api/adminApi";
  import projectApi from "@/api/projectApi";
  import commonApi from "@/api/common";
  import brandApi from '@/api/brandApi'
  export default {
    name: '',
    components: {},
    data() {
      return {
        tableLoading: false,
        page: 1,
        tableData: [],
        formSearch: {
          project_num: '',
          client_id: '',
          principal_id: '',
          progress: '',
          title: '',
          type_id: ''
        },
        moreSearchShow: false,
        showOpne: false,
        page: 1,
        num: 10,
        total: 0,
        addLoading: false,
        project_id: '',
        HtmlAuthority: {
          project_getProjectInfo: false,
          project_projectAdd: false,
          project_projectDel: false
        },
        ProjectType: [],
        addDialogVisible: false,
        addFormInline: {
          project_type: 1,
          project_name: '',
          project_city: [],
          address: '',
          user_id: '',
          channel_manager_id: '',
          brand_id: '',
          survey_site: '',
          designer_id: '',
          template_id: '',
          engineeringSupervision_id: ''
        },
        addRules: {
          project_type: [{
            required: true,
            message: '请选择装修类型',
            trigger: 'change'
          },],
          project_name: [{
            required: true,
            message: '请填写项目名称',
            trigger: 'change'
          },],
          project_city: [{
            required: true,
            message: '请选择所属地区',
            trigger: 'change'
          },],
          address: [{
            required: true,
            message: '请填写详细地址',
            trigger: 'change'
          },],
          user_id: [{
            required: true,
            message: '请选择关联客户',
            trigger: 'change'
          },],
          channel_manager_id: [{
            required: true,
            message: '请选择渠道经理',
            trigger: 'change'
          },],
          brand_id: [{
            required: true,
            message: '请选择品牌',
            trigger: 'change'
          },],
          survey_site: [{
            required: true,
            message: '请选择是否勘场',
            trigger: 'change'
          },],
          designer_id: [{
            required: true,
            message: '请选择设计师',
            trigger: 'change'
          },],
          template_id: [{
            required: true,
            message: '请选择节点模板',
            trigger: 'change'
          },],
          engineeringSupervision_id: [{
            required: true,
            message: '请选择工程总监',
            trigger: 'change'
          },],
        },
        detailDrawer: false,
        designerList: [], //设计师列表
        cityList: [], //省市区数据
        userList: [], //客户列表
        brandTemplate: [], //模板列表
        channelManagerList: [], //渠道经理列表
        brandList: [], //品牌列表
        engineeringSupervisionList: [], //工程总监列表
        addLoading: false
      }
    },
    watch: {

    },
    computed: {

    },
    activated() {
      if (this.$store.state.catchList != '/project/projectDetail') {
        this.formSearch = {
          project_num: '',
          client_id: '',
          principal_id: '',
          progress: '',
          title: '',
          type_id: ''
        }
        this.tableData = [];
        this.total = 0;
        this.page = 1;
        this.$once('hook:beforeDestroy', function () {
          window.onresize = null;
        })
        this.onresize(); //监听搜索容器变化
        window.onresize = () => {
          this.onresize(); //监听搜索容器变化
        }
      }
    },
    destroyed() {
      window.onresize = null;
    },
    mounted() {
      this.$once('hook:beforeDestroy', function () {
        window.onresize = null;
      })
      this.onresize(); //监听搜索容器变化
      window.onresize = () => {
        this.onresize(); //监听搜索容器变化
      }
      this.getAdminList();
      this.getAreaList();
      this.getUserList();
      this.getChannel_managerList();
      this.getBrandList();
      this.getEngineering_directorList();
      this.getProjectList();
    },
    methods: {
      // 单页数据量修改
      handleSizeChange(e) {
        this.num = e;
        this.page = 1;
        this.getProjectList();
      },
      // 页面权限
      getHtmlAuthority() {
        commonApi.getHtmlAuthority({
          path: this.$route.path
        }).then(res => {
          console.log(res, '页面权限')
          if (res.code == 200) {
            this.HtmlAuthority = res.data;
          }
        });
      },
      // 搜索
      onSreach() {
        this.page = 1;
        this.getProjectList();
      },
      // 翻页
      handleCurrentChange(page) {
        this.page = page;
        this.getProjectList();
      },
      onresize() {
        let inter = '';
        clearTimeout(inter)
        inter = setTimeout(() => {
          if (!this.$refs.div) return;
          let height = this.$refs.div.$el.offsetHeight;
          height > 70 ? this.showOpne = true : this.showOpne = false;
          this.moreSearchShow = false;
        }, 1000);
      },
      moreSearch() {
        this.moreSearchShow = !this.moreSearchShow;
      },
      // 添加项目
      addSubmit(formName) {
        let addFormInline = this.addFormInline;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let obj = {
              project_type: addFormInline.project_type,
              project_name: addFormInline.project_name,
              project_number: '',
              user_id: addFormInline.user_id,
              customer_name: addFormInline.customer_name,
              customer_phone: addFormInline.customer_phone,
              province_id: addFormInline.project_city[0],
              city_id: addFormInline.project_city[1],
              county_id: addFormInline.project_city[2],
              address: addFormInline.address,
              brand_id: addFormInline.brand_id,
              brand_name: addFormInline.brand_name,
              survey_site: addFormInline.survey_site,
              channel_manager_id: addFormInline.channel_manager_id,
              channel_manager_name: addFormInline.channel_manager_name,
              designer_id: addFormInline.designer_id,
              designer_name: addFormInline.designer_name,
              engineering_director_id: addFormInline.engineeringSupervision_id,
              engineering_director_name: addFormInline.engineering_director_name,
              remark: '',
            }
            this.addProject(obj);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 添加项目接口请求
      addProject(data) {
        this.addLoading = true;
        projectApi.addProject(data).then(res => {
          console.log(res, "添加项目")
          this.addLoading = false;
          if (res.code == 200) {
            this.onSreach();
            this.addDialogVisible = false;
          }
          this.$message({
            type: res.code == 200 ? 'success' : 'warning',
            message: res.message
          })
        }).catch(err => {
          this.addLoading = false;
          this.$message({
            type: 'warning',
            message: err.message
          })
        })
      },
      // 添加项目
      addProjectFunc() {
        this.addDialogVisible = true;
        this.$nextTick(() => {
          this.$refs['addRuleForm'].clearValidate();
        })
      },
      // 关闭添加项目弹窗
      cancelFunc() {
        this.$refs['addRuleForm'].clearValidate();
        this.$nextTick(() => {
          this.addDialogVisible = false;
        })
      },
      // 设计师列表
      getAdminList() {
        var obj = {
          page: 1,
          num: 9999,
          keyword: '',
          province_id: "",
          city_id: "",
          county_id: "",
          identity: 1,
          position_id_arr: [3]
        };
        adminApi
          .getAdminList(obj)
          .then((res) => {
            console.log(res, "设计师列表");
            if (res.code == 200) {
              this.designerList = res.data.list;
            } else {
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          })
          .catch((err) => { });
      },
      // 客户列表
      getUserList() {
        var obj = {
          page: 1,
          num: 9999,
          keyword: '',
          province_id: "",
          city_id: "",
          county_id: "",
          identity: 4,
          position_id_arr: []
        };
        adminApi
          .getAdminList(obj)
          .then((res) => {
            console.log(res, "客户列表");
            if (res.code == 200) {
              this.userList = res.data.list;
            } else {
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          })
          .catch((err) => { });
      },
      // 渠道经理列表
      getChannel_managerList() {
        var obj = {
          page: 1,
          num: 9999,
          keyword: '',
          province_id: "",
          city_id: "",
          county_id: "",
          identity: 3,
          position_id_arr: []
        };
        adminApi
          .getAdminList(obj)
          .then((res) => {
            console.log(res, "渠道经理列表");
            if (res.code == 200) {
              this.channelManagerList = res.data.list;
            } else {
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          })
          .catch((err) => { });
      },
      // 工程监理
      getEngineering_directorList() {
        var obj = {
          page: 1,
          num: 9999,
          keyword: '',
          province_id: "",
          city_id: "",
          county_id: "",
          identity: 1,
          position_id_arr: [8]
        };
        adminApi
          .getAdminList(obj)
          .then((res) => {
            console.log(res, "工程监理");
            if (res.code == 200) {
              this.engineeringSupervisionList = res.data.list;
            } else {
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          })
          .catch((err) => { });
      },
      // 省市区
      getAreaList() {
        commonApi.getAreaList().then((res) => {
          console.log(res, "省市区");
          if (res.code == 200) {
            this.cityList = res.data;
          }
        });
      },
      // 品牌列表
      getBrandList() {
        brandApi.getBrandList({
          page: 1,
          num: 9999,
          keyword: ''
        }).then(res => {
          console.log(res, "品牌列表")
          if (res.code == 200) {
            this.brandList = res.data.list;
          }
        }).catch(() => { })
      },
      // 选择事件
      selectChangeFunc(e) {
        let index = 0;
        switch (e.type) {
          case 'user': //客户
            let userList = this.userList;
            index = userList.findIndex(item => {
              return item.id == e.$event;
            })
            this.addFormInline.customer_name = userList[index].name;
            this.addFormInline.customer_phone = userList[index].phone;
            break;
          case 'engineeringSupervision': //工程总监
            let engineeringSupervisionList = this.engineeringSupervisionList;
            index = engineeringSupervisionList.findIndex(item => {
              return item.id == e.$event;
            })
            this.addFormInline.engineering_director_name = engineeringSupervisionList[index].name;
            break;
          case 'channel_manager': //渠道经理
            let channelManagerList = this.channelManagerList;
            index = channelManagerList.findIndex(item => {
              return item.id == e.$event;
            })
            console.log(index, "index")
            this.addFormInline.channel_manager_name = channelManagerList[index].name;
            break;
          case 'brand': //品牌
            let brandList = this.brandList;
            index = brandList.findIndex(item => {
              return item.id == e.$event;
            })
            this.brandTemplate = brandList[index].brand_template;
            this.addFormInline.template_id = '';
            this.addFormInline.brand_name = brandList[index].name;
            break;
          case 'designer': //设计师
            let designerList = this.designerList;
            index = designerList.findIndex(item => {
              return item.id == e.$event;
            })
            this.addFormInline.designer_name = designerList[index].name;
            break;
          default:
        }
      },
      // 项目列表
      getProjectList() {
        projectApi.getProjectList({
          page: this.page,
          num: this.num
        }).then(res => {
          console.log(res, "项目列表")
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.max;
          } else {
            this.$message.warning(res.message);
          }
        }).catch(err => {
          this.$message.warning(err.message);
        })
      },
    }
  }

</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>